﻿@model WebUI.Models.NccListViewModel

@{
    ViewBag.Title = "Index";
}

<div class="ncc-vmenublock clearfix ncc-timkiem" style="margin: 5px 0px 5px 1px">
    <div class="ncc-vmenublockheader ncc-toolbar-head">
        <h2 class="t">Tìm kiếm</h2>
    </div>
    <div class="ncc-vmenublockcontent ncc-toolbar-body" style="display: block">
        @Html.Action("SearchNcc", "Search")
    </div>
</div>

<div id="ncclist">
    @*@Html.Action("ListData")*@
    @Html.Partial("ListDataJson")
</div>

<div id="detailDialog" title="Person Information"></div>

<script type="text/javascript">
    function PagingInfo(totalItems, itemPerPage, currentPage, totalPages) {
        this.totalItems = totalItems;
        this.itemPerPage = itemPerPage;
        this.currentPage = currentPage;
        this.totalPages = totalPages;
    }

    function NccSearchModel(hoTen, namSinh, isLietSy, idQuanHuyen, idXaPhuong, lstIdNhomNcc) {
        this.HoTen = hoTen;
        this.NamSinh = namSinh;
        this.IsLietSy = isLietSy;
        this.IdQuanHuyen = idQuanHuyen;
        this.IdXaPhuong = idXaPhuong;
        this.LstIdNhomNcc = lstIdNhomNcc;
    }

    function ShowLoading() {
        $("#loading").show();
    }

    function HideLoading() {
        $("#loading").hide();
    }
    
    

    var listDataJsonParas;

    $(document).ready(function () {

        //Toggle TimKiem
        $(".ncc-timkiem .ncc-toolbar-head").click(
            function () {
                $(".ncc-timkiem .ncc-toolbar-body").slideToggle("600");
            });

                
        $('#detailDialog').dialog({
            autoOpen: false,
            width: 600,
            resizable: false,
            title: "Thông tin chi tiết",
            modal: true,
            buttons: {
                "Ok": function () {
                    $(this).dialog("close");
                }
            }
        });

        //Bind data
        BindData(listDataJsonParas);
    }); //End jquery


    //NEW

    function BindData(routeValues) {
        ShowLoading();

        //Bind list Ncc
        $.ajax({
            url: '@Url.Action("ListDataJson")',
            dataType: 'json',
            data: JSON.stringify(routeValues),
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            cache: false,
            success: function (data) {
                FillData(data);
            } //End ajax success

        }); //End ajax "Bind list Ncc"
    }

    function FillData(data) {
        listDataJsonParas = {
            nccSearchModel: new NccSearchModel(
                data.NccSearchModel.HoTen,
                data.NccSearchModel.NamSinh,
                data.NccSearchModel.IsLietSy,
                data.NccSearchModel.IdQuanHuyen,
                data.NccSearchModel.IdXaPhuowng,
                data.NccSearchModel.LstIdNhomNcc
            ),
            sort: data.CurrentSort,
            sortType: data.SortType
        };

        var listncc = $(".list-ncc");
        listncc.html('');

        for (var i = 0; i < data.Nccs.length; i++) {
            var tr = $('<tr> </tr>');

            var tdStt = $('<td> </td>').attr({ style: 'width: 30px' });
            var tdMa = $('<td> </td>').attr({ style: 'width: 70px', 'class': 'td-center' });
            var tdHoTen = $('<td> </td>').attr({ style: 'width: 300px' });
            var link = '@Url.Action("DetailNcc", new { nccId = "id" })';
            var hoten = $('<a> </a>').attr({ href: link.replace("id", data.Nccs[i].Id), 'class': 'detailLink' }).text(data.Nccs[i].HoTen);
            $(tdHoTen).append(hoten);
            var tdNamSinh = $('<td> </td>').attr({ style: 'width: 100px', 'class': 'td-center' }).text(data.Nccs[i].NamSinh);
            var tdNoiCapTruyLinh = $('<td> </td>').attr({ style: 'width: 250px' }).text(data.Nccs[i].NoiCapTruyLinh);
            var tdNguyenQuan = $('<td> </td>').attr({ style: 'width: 250px' }).text(data.Nccs[i].NguyenQuan);

            tr.append(tdStt);
            tr.append(tdMa);
            tr.append(tdHoTen);
            tr.append(tdNamSinh);
            tr.append(tdNoiCapTruyLinh);
            tr.append(tdNguyenQuan);

            listncc.append(tr);
        }
        
        //Implement detail
        $(".detailLink").click(function() {
            var linkObj = $(this);
            var dialogDiv = $('#detailDialog');
            var viewUrl = linkObj.attr('href');
            
            $.get(viewUrl, function (data) {
                dialogDiv.html(data);

                dialogDiv.dialog('open');
            });

            return false;
        });

        //Pager
        var pagingInfo = new PagingInfo(data.PagingInfo.TotalItems, data.PagingInfo.ItemsPerPage, data.PagingInfo.CurrentPage, data.PagingInfo.TotalPages);

        var pager = $("#ncclist .ncc-pager");
        $(pager).html('');

        var info = $("<div></div>").text("Tìm được " + pagingInfo.totalItems + " người.");
        $(info).attr({ 'style': 'float:left; margin-top: -1px; font-style: italic;' });
        pager.append(info);

        var pFirst = $("<a> </a>").text("Trang đầu");
        $(pFirst).attr({ 'class': 'page-number', value: 1 });
        pager.append(pFirst);

        if (pagingInfo.currentPage > 1) {
            var pPrevious = $("<a> </a>").text("< Trước");
            $(pPrevious).attr({ 'class': 'page-number', value: pagingInfo.currentPage - 1 });
            pager.append(pPrevious);
        }

        var pageDot = $("<a> </a>").text("...");
        if (pagingInfo.currentPage > 4) {
            pager.append(pageDot);
        }

        var pageIndex = pagingInfo.currentPage > 4 ? pagingInfo.currentPage - 4 : 1;

        for (var i = 0; i < 10 && pageIndex <= pagingInfo.totalPages; i++) {
            var $page = $("<a> </a>").text(pageIndex);
            $page.attr({ 'class': 'page-number', value: pageIndex });
            if (pageIndex == pagingInfo.currentPage)
                $page.attr({ 'class': 'current-page' });
            pageIndex++;

            pager.append($page);
        }

        if (pagingInfo.totalPages - pagingInfo.currentPage > 4) {
            pager.append(pageDot);
        }

        if (pagingInfo.currentPage < pagingInfo.totalPages) {
            var pNext = $("<a> </a>").text("Sau >");
            $(pNext).attr({ 'class': 'page-number', value: pagingInfo.currentPage + 1 });
            pager.append(pNext);
        }

        var pLast = $("<a> </a>").text("Trang cuối");
        $(pLast).attr({ 'class': 'page-number', value: pagingInfo.totalPages });
        pager.append(pLast);

        //Implement pager click
        PagerClick();

        //Apply css sort-column
        $(".sort-column span").removeAttr("class");
        if (data.SortType == "asc")
            $(".sort-column[sort-data=" + data.CurrentSort + "] span").attr("class", "order-icon-asc");
        else
            $(".sort-column[sort-data=" + data.CurrentSort + "] span").attr("class", "order-icon-desc");
        $(".sort-column").removeAttr("is-active");
        $(".sort-column[sort-data=" + data.CurrentSort + "]").attr("is-active", true);
        $(".sort-column[sort-data=" + data.CurrentSort + "]").attr("sort-type", data.SortType);

        //Hide loading
        HideLoading();
    }
    //END NEW

    //Implement click pager
    function PagerClick() {
        $(".page-number").click(function () {
            listDataJsonParas.pageIndex = $(this).attr("value");

            BindData(listDataJsonParas);
        });
    }   //End pager click

    $(".sort-column").click(function () {
        var sortType = "asc";

        //Check is current sorted
        var abc = $(this).attr("is-active");

        //Original column
        if (abc == "true") {
            //Reverse sort type
            if ($(this).attr("sort-type") == "asc") {
                sortType = "desc";
                $(this).attr("sort-type", "desc");
            } else {
                sortType = "asc";
                $(this).attr("sort-type", "asc");
            }

        }
        listDataJsonParas.sortType = sortType;
        listDataJsonParas.sort = $(this).attr("sort-data");

        //Re-bind data
        BindData(listDataJsonParas);
    });

    

</script>
